﻿@model ElectroSystem.Models.FilterModel 
@{
    ViewBag.Title = "Filter through your Transactions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<script type="text/javascript">
    $(function() {
        $( "#startdt" ).datepicker();
        $( "#enddt" ).datepicker();
    });

    function filter() {
        if (($("#startdt").val() == "") && ($("#enddt").val() == "") && ($("#ddlProducts").val() == "")) {
            alert("Select a product and two dates to filter by!")
        }
        else if ($("#startdt").val() == "") {
            alert("Input date to filter by!");
        }
        else if ($("#enddt").val() == "") {
            alert("Input date to filter by!");
        }
        else if ($("#ddlProducts option:selected").val() == "") {
            alert("Select a Product to filter by!")
        }
        else {
            var startdate = $('#startdt').val();
            var enddate = $('#enddt').val();
            var prodid = $("#ddlProducts option:selected").val();

            var param = { startDate: startdate, endDate: enddate, prodID: prodid };

            $.ajax({
                url: '@Url.Action("GetFilterTransactions")',
                type: "GET",
                datatype: "html",
                UpdateTargetId: "divResult", // The DIV that will contain the partial view
                data: param, // Passing the parameters var
                error: function (xmlHttpRequest, errorText, thrownError) {
                    alert("An error has occurred.");
                },
                success: function (data) {
                    $('#divResult').empty();
                    $('#divResult').html(data);
                }
            });
        }
    }
</script>

@Html.Label("ProductName: ") <br />
@Html.DropDownListFor(model => model.ProductID, Model.Products, "--Select Product--", new { id = "ddlProducts" }) <br />

@Html.Label("Start Date: ") 
<input type="text" id="startdt" /> <br />
@Html.Label("End Date: ") 
<input type="text" id="enddt" /> <br />

<button type="button" onclick="filter()">Filter Transactions</button>
<br /> <br />

<div id = "divResult">
</div>